<template>
	<view class="content">
		<map class="map-box" 
			show-location="true" 
			:markers="markers" 
			:latitude="lat"
			:scale="12"
			:longitude="long"
			@callouttap="markertap"
		>
			<block v-for="(item, index) in markers" :key="item.id">
				<cover-view slot="callout" :marker-id="item.id">
					<cover-image slot="callout" :marker-id="item.id" v-if="item.mer_logo && showImg" :src="item.mer_logo" class="mapImg"></cover-image>
				</cover-view>
			</block>
		</map>
		<view class="address-plate-box">
			<swiper
				class="shopSwiper"
				:current="cur"
				vertical
			>
				<block v-for="(item, index) in markers" :key="item.id">
					<swiper-item>
						<view class="top-shop-title-box">
							<view class="left-box flex-c-c">
								<image src="../../static/shop_icon/icon1.png" mode="heightFix"></image>
								<text class="ellipsis">{{item.title}}</text>
								<text class="isBinding" v-if="item.is_bind==1">已绑定</text>
							</view>
							<view class="right-box flex-c-c" @click="goShop(item)">
								<text>进入店铺</text>
								<image src="../../static/shop_icon/icon2.png" mode="heightFix"></image>
							</view>
						</view>
						<view class="bottom-box">
							<view class="left-box">
								<text>{{item.mer_address}}</text>
							</view>
							<view class="right-box" @click="goNavigation(item)">
								<image src="../../static/shop_icon/icon3.png" mode=""></image>
							</view>
						</view>
					</swiper-item>
				</block>
			</swiper>
<!-- 			<view class="top-shop-title-box">
				<view class="left-box flex-c-c">
					<image src="../../static/shop_icon/icon1.png" mode="heightFix"></image>
					<text class="ellipsis">{{shopInfo.title}}</text>
					<text class="isBinding" v-if="shopInfo.is_bind==1">已绑定</text>
				</view>
				<view class="right-box flex-c-c" @click="goShop">
					<text>进入店铺</text>
					<image src="../../static/shop_icon/icon2.png" mode="heightFix"></image>
				</view>
			</view>
			<view class="bottom-box">
				<view class="left-box">
					<text>{{shopInfo.mer_address}}</text>
				</view>
				<view class="right-box" @click="goNavigation">
					<image src="../../static/shop_icon/icon3.png" mode=""></image>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				cur: 0,
				markers:[],
				shopInfo:{},//门店信息
				lat:"",
				long:"",
				showImg: false,
			}
		},
		onLoad() {
			uni.showLoading({title:"正在获取门店中...",mask:true});
			const { latitude, longitude } = uni.getStorageSync('city');
			this.lat = latitude;
			this.long = longitude;
		},
		onShow() {
			this.markers = []
			this.getShopInfo();
		},
		methods:{
			getShopInfo(){
				const { lat, long } = this;
				this.$u.api.nearByMerchantApi({ lat, long }).then(res=>{
					if(res.code==1){
						console.log('附近门店：',res);
						res.data.forEach(res=>{
							res.iconPath = '/static/icon_location_white.png';
							res.title = res.mer_name;
							res.id = res.mer_id;
							res.width = 40;
							res.height = 46;
							res.customCallout = {
								anchorX: 0,
								anchorY: 35,
								display: "ALWAYS",
							}
						});
						this.markers = res.data;
						this.shopInfo = this.markers[0];
						setTimeout(() => {
							this.showImg = true
						}, 300)
					}
				});	
			},
			goNavigation({ title: name, latitude, longitude }){//导航
				let _this = this;
					uni.openLocation({
						latitude: + latitude,
						longitude: + longitude,
						name,
					success(res){
						console.log(res);	
					},
					fail(e) {
						console.log("err",e);
					}
				});
			},
			markertap(e){
				console.log(e)
				this.shopInfo = this.markers.find(res=>e.markerId==res.id);
				// console.log(this.shopInfo,'----');
				const {
					markers,
				} = this
				const index = markers.findIndex(item => item.id == e.markerId)
				console.log(index)
				this.cur = index
			},
			markClick(item){
				console.log(item)
			},
			goShop({ id }){ //查看门店
				this.$gourl(`/pageIndex/storeInfo/storeDetails?merId=${id}`);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		position: relative;
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		.mapImg{
			width: 30px;
			height: 30px;
			border-radius: 50%;
		}
		.map-box{
			width: 750rpx;
			height: 100vh;
			// height: 642px;
		}
		.address-plate-box{
			position: absolute;left: 50%;bottom: 50rpx;
			transform: translateX(-50%);
			z-index: 100;
			width: 710rpx;
			padding: 20rpx;
			background: rgba(255, 255, 255, 0.95);
			box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
			border-radius: 20rpx;
			height: 267rpx;
			box-sizing: border-box;
			.shopSwiper{
				height: 100%;
			}
			.top-shop-title-box{
				padding-bottom: 20rpx;
				display: flex;
				border-bottom: 1rpx solid #eee;
				margin-bottom: 30rpx;
				.left-box{
					flex: 0.8;
					justify-content: flex-start;
					.ellipsis{max-width: 350rpx;}
					image{width: 30rpx;height: 30rpx;margin-right: 10rpx;}
					.isBinding{
						padding: 4rpx 15rpx;
						background: #eee;
						font-size: 26rpx;
						font-weight: bold;
						color: #333333;
						margin-left: 10rpx;
					}
				}
				.right-box{
					flex: 0.2;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					line-height: 0;
					image{width: 20rpx;height: 20rpx;margin-left: 10rpx;vertical-align: middle;}
				}
			}
			.bottom-box{
				display: flex;
				.left-box{
					flex: 0.8;
					font-size: 28rpx;
					font-weight: 400;
					color: #000000;
				}
				.right-box{
					flex: 0.2;
					display: flex;
					justify-content: flex-end;
					line-height: 0;
					image{width: 100rpx;height: 100rpx;}
				}
			}
		}
	}
</style>